<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="__PUBLIC__/echarts/echarts.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
    <script src="{$Think.config.httpFlag}{$Think.config.google_map_url}" async="async"></script>
</head>

<body>
<div class="layui-fluid main">

    <div style="height:800px;overflow:auto;display: inline-block;width: 37%">
        <fieldset class="layui-elem-field site-demo-button" style="margin-top:20px;border:0">
            <div>定制行程/<strong>{notempty name="$tripname"}{$tripname}{/notempty}</strong></div>
        </fieldset>
        <fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;border:0">

            <div class="layui-form-item" style="float: left;">

                <a href="{:url('admin/trip/preview',['id'=>$id])}" target="_blank" class="layui-btn layui-btn-danger layui-btn-sm">预览</a>
                <a href="{:url('admin/trip/addcustomized',['groupid'=>$id])}" class="layui-btn layui-btn-sm a_menu">
                    新增日程
                </a>

                <a href="{:url('admin/trip/addcombination',['id'=>$id])}" class="layui-btn layui-btn-sm a_menu">
                    组合行程
                </a>

                {if $use_type==1}
                <a href="{:url('admin/trip/product')}" class="layui-btn layui-btn-sm">
                    返回产品列表
                </a>
                {else}
                <a href="{:url('admin/trip/index')}" class="layui-btn layui-btn-sm">
                    返回定制列表
                </a>
                {/if}

            </div>
        </fieldset>
        <table class="layui-table"  lay-even="" lay-skin="line" >
            <colgroup>
                <col width="200">
                <col width="200">
                <!--<col width="100">-->
            </colgroup>
            <thead>
            <tr>
                <th>日程名称</th>
                <th>操作</th>
                <!--<th>成本</th>-->
            </tr>
            </thead>
            <tbody>
            {volist name="schedule" id="vo"}
            <tr >
                <td class="seeactive" codeurl="{:url('admin/trip/pcustomized',['id'=>$id,'day'=>$vo.displayorder])}">
                    <strong>
                        <span>第<span style="color: #FF5722">{$vo.displayorder}</span>天</span>&nbsp
                        <span>{$vo.time}</span>
                        <span>{$vo.title}</span>
                    </strong>
                </td>
                <td class="operation-menu">
                    <a href="{:url('admin/trip/addcustomized',['id'=>$vo.id])}" class="layui-btn layui-btn-xs a_menu" style="margin-left: 0;font-size:12px;">修改</a>
                    <!--<a href="{:url('trip/price',['schedule_id'=>$vo.id])}" class="layui-btn layui-btn-xs a_menu" style="margin-left: 0;margin-right: 0;font-size:12px;">核算</a>-->
                    <a class="layui-btn layui-btn-xs layui-btn-danger delete" codeid="{$vo.id}" style="margin-right: 0;font-size:12px;">删除</a>
                    <br><a class="layui-btn layui-btn-xs layui-btn-primary pre" codeid="{$vo.displayorder}" style="margin-left: 0;margin-top: 5px;font-size:12px;">向上</a>
                    <a class="layui-btn layui-btn-xs layui-btn-primary nex" codeid="{$vo.displayorder}" style="margin-left: 0;margin-right: 0;margin-top: 5px;font-size:12px;">向下</a>
                    <a class="layui-btn layui-btn-xs layui-btn-primary add" codeid="{$vo.displayorder}" style="margin-left: 0;margin-right: 0;margin-top: 5px;font-size:12px;">加一天</a>
                </td>
                <!--<td>-->
                    <!--{if $vo.count_price}-->
                    <!--<input type="hidden" class="price" value="{$vo.count_price}">-->
                    <!--<span>{$vo.count_price}</span>-->
                    <!--{else}-->
                    <!--<span>0</span>-->
                    <!--{/if}-->
                <!--</td>-->
            </tr>
            {/volist}

            <!--<tr>-->
                <!--<td><strong>核价：</strong></td>-->
                <!--<td></td>-->
                <!--<td>-->
                    <!--<strong>-->
                        <!--<span id="count_price">0</span>-->
                    <!--</strong>-->
                <!--</td>-->
            <!--</tr>-->
            </tbody>
        </table>
    </div>
    <div class="right75" style="height:800px;overflow:auto;width: 28%;margin: 10px 0">
        <div id="map"{notempty name="$origin"}  style="height: 400px"{/notempty}></div>
    <div id="right-panel" {notempty name="$origin"}style="height: 200px;overflow-y: auto"{/notempty}></div>
<h3 style="margin: 10px 0">附近poi</h3>
{volist name="nearspots" id="vo"}
<div class="nearpoi" data-id="{$vo[2]}">{$vo[0]}({$vo[1]}km)</div>
<hr class="layui-bg-gray">
{/volist}
</div>

<div class="right75" style="height:800px;overflow:auto;width: 35%;margin: 10px 0">

    {notempty name="$day"} <h3 style="margin: 10px 0">第{$day}天</h3>{/notempty}

    <ul class="layui-timeline">
        {volist name="active" id="vo"  key="k"}
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis"></i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">{$vo.time}{if $vo.poiname}{$vo.poiname}{elseif $vo.cityname}{$vo.cityname}{else}{$vo.title}{/if}</h3>
                <p>

                    {if $vo.mapmark}地图{$vo.mapmark}<br>{/if}
                    {if empty($vo.poiname)&&empty($vo.cityname)}{$vo.content}<br>{/if}

                    <a href="{:url('admin/trip/addpactive',['id'=>$vo.id])}" class="layui-btn layui-btn-xs a_menu1" style="margin-left: 0;font-size:12px;">修改</a>
                    <a class="layui-btn layui-btn-xs layui-btn-danger activedel" codeid="{$vo.id}" style="margin-right: 0;font-size:12px;">删除</a>
                    <a class="layui-btn layui-btn-xs layui-btn-primary activepre" codeid="{$vo.id}" orderid="{$vo.displayorder}" style="margin-right: 0;font-size:12px;">向上</a>
                    <a class="layui-btn layui-btn-xs layui-btn-primary activenex" codeid="{$vo.id}" orderid="{$vo.displayorder}" style="margin-right: 0;font-size:12px;">向下</a>
                </p>
            </div>
        </li>
        {if $vo.limit}
        <li class="layui-timeline-item">
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title"><i class="layui-icon">&#xe715;</i>  相距{$vo.limit}公里  <span class="car"></span>  <span class="distance"></span></h3>
            </div>
        </li>
        {/if}

        {/volist}
        {notempty name="$schedule"}
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis"></i>
            <div class="layui-timeline-content layui-text">
                <div class="layui-timeline-title">
                    <a href="{:url('admin/trip/addpactive',['groupid'=>$schedule[$day-1]['id']])}" class="layui-btn layui-btn-xs layui-btn-primary a_menu1" style="margin-right: 0;font-size:12px;">添加活动</a>
                </div>
            </div>
        </li>
        {/notempty}
    </ul>
</div>
</div>
<script src="__PUBLIC__/layui/layui.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script type="text/javascript">

    $('.delete').click(function(){
        var id = $(this).attr('codeid');
        layer.confirm('确定要删除?', function(index) {
            $.ajax({
                url:"{:url('admin/trip/delcustomized')}",
                type:"post",
                data:{
                    id:id,
                    groupid:{$id}
                },
                success:function(res) {
                    layer.msg(res.msg);
                    if(res.code == 1) {
                        setTimeout(function(){
//                            location.href = res.url;
                            location.reload();
                        },1500)
                    }
                }
            })
        });
    });

    $(".seeactive").click(function () {
        var codeurl=$(this).attr("codeurl");
        window.location.href=codeurl;

    });

    $('.activedel').click(function(){
        var id = $(this).attr('codeid');
        layer.confirm('确定要删除?', function(index) {
            $.ajax({
                url:"{:url('admin/trip/delactive')}",
                type:"post",
                data:{
                    id:id,
                },
                success:function(res) {
                    layer.msg(res.msg);
                    if(res.code == 1) {
                        setTimeout(function(){
                            location.reload();
                        },1500)
                    }
                }
            })
        });
    });
</script>
<script type="text/javascript">
    layui.use('layer', function(){
        var layer = layui.layer;
        $('.a_menu').click(function(){
            var url = $(this).attr('href');
            var a = 0;
            $.ajax({
                url:url
                ,async:false
                ,success:function(res){
                    if(res.code == 0) {
                        layer.msg(res.msg);
                        a = 1;
                    }
                }
            })
            if(a === 0) {
                layer.open({
                    type:2,
                    content:url,
                    area: ['65%', '75%'],
                    end:function(){
                        location.reload();
                    }
                });
            }
            return false;
        });
        $('.a_menu1').click(function(){
            var url = $(this).attr('href');
            var a = 0;
            $.ajax({
                url:url
                ,async:false
                ,success:function(res){
                    if(res.code == 0) {
                        layer.msg(res.msg);
                        a = 1;
                    }
                }
            })
            if(a === 0) {
                layer.open({
                    type:2,
                    content:url,
                    area: ['65%', '95%'],
                    end:function(){
                        location.reload();
                    }
                });
            }
            return false;
        });

        $('.preview').click(function(){
            var url = $(this).attr('href');
            layer.open({
                type:2,
                content:url,
                area: ['550px', '400px']
            });
            return false;
        });

        $('.nearpoi').click(function(){
            var id = $(this).attr("data-id");
            var url="/admin/trip/activesee/id/"+id+".shtml";
            layer.open({
                type:2,
                content:url,
                area: ['750px', '600px']
            });
            return false;
        });

        $(".add").click(function () {
            var id=$(this).attr("codeid");
            $.ajax({
                url:"{:url('admin/trip/addsomecustomized')}",
                data:{
                    id:id,
                    groupid:{$id}
                },
                type:'post',
                async: false,
                success:function(res) {
                    if(res.code == 1) {
                        location.reload();
                    }
                }
            })
        });
        $(".pre").click(function () {
            var id=$(this).attr("codeid");
            $.ajax({
                url:"{:url('admin/trip/upcustomized')}",
                data:{
                    id:id,
                    groupid:{$id}
                },
                type:'post',
                async: false,
                success:function(res) {
                    if(res.code == 1) {
                        location.reload();
                    }
                }
            })
        });

        $(".nex").click(function () {
            var id=$(this).attr("codeid");
            $.ajax({
                url:"{:url('admin/trip/downcustomized')}",
                data:{
                    id:id,
                    groupid:{$id}
                },
                type:'post',
                async: false,
                success:function(res) {
                    if(res.code == 1) {
                        location.reload();
                    }
                }
            })
        });


        $(".activepre").click(function () {
            var id=$(this).attr("codeid");
            var orderid=$(this).attr("orderid");
            $.ajax({
                url:"{:url('admin/trip/upactive')}",
                data:{
                    id:id,
            {notempty name="$schedule"}groupid:{$schedule[$day-1]['id']},{/notempty}
            orderid:orderid
        },
            type:'post',
                async: false,
                success:function(res) {
                if(res.code == 1) {
                    location.reload();
                }
            }
        })
        });

        $(".activenex").click(function () {
            var id=$(this).attr("codeid");
            var orderid=$(this).attr("orderid");
            $.ajax({
                url:"{:url('admin/trip/downactive')}",
                data:{
                    id:id,
            {notempty name="$schedule"}groupid:{$schedule[$day-1]['id']},{/notempty}
            orderid:orderid
        },
            type:'post',
                async: false,
                success:function(res) {
                if(res.code == 1) {
                    location.reload();
                }
            }
        })
        });
        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 4,
                center: {lat: 39.90419989999999, lng: 116.40739630000007}  // 北京
            });

            var directionsService = new google.maps.DirectionsService;
            var directionsDisplay = new google.maps.DirectionsRenderer({
                draggable: false,
                map: map,
                panel: document.getElementById('right-panel')
            });

            directionsDisplay.addListener('directions_changed', function() {
                computeTotalDistance(directionsDisplay.getDirections());
            });

            displayRoute({$origin}, {$destination}, directionsService,
                directionsDisplay);
        }

        function displayRoute(origin, destination, service, display) {
            service.route({
                origin: origin,
                destination: destination,
                waypoints: [

                    {volist name="waypoints" id="vo"}
                    {location: {lat: {$vo[0]}, lng:{$vo[1]}}},
                    {/volist}
        ],
            travelMode: 'DRIVING',
                avoidTolls: true
        }, function(response, status) {
                if (status === 'OK') {
                    display.setDirections(response);
                } else {
                    $("#map").height("0");
                    $("#right-panel").height("0");
                    layer.msg('路径规划失败');
                }
            });
        }

        function computeTotalDistance(result) {
            var myroute = result.routes[0];
            for (var i = 0; i < myroute.legs.length; i++) {
                var car = myroute.legs[i].distance.value;
                var distance = myroute.legs[i].duration.text;

                $(".car").eq(i).html("车程"+car/1000+"公里");
                $(".distance").eq(i).html(distance);
            }
        }

        //价格核算
        function countPrice(){
            var count_price = 0;
            $(".price").each(function(){
                var price = $(this).attr("value");
                price = parseInt(price);
                if(price>0){
                    count_price += price;
                }
            });
            count_price = count_price.toFixed(2);

            console.log(count_price);

            $("#count_price").html(count_price);
        }

        countPrice();


        initMap()


    });
</script>

<script>

</script>
</body>
</html>
